<template>
  <div class="enterprise">
    <!-- 头部搜索 新增样式 -->
    <el-card class="cardTop">
      <el-form :inline="true" :model="form" ref="form">
        <el-form-item label="企业编号">
          <el-input v-model="form.eid"></el-input>
        </el-form-item>
        <el-form-item label="企业名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="创建者">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="form.status" placeholder="请选择状态">
            <el-option label="禁用" value="0"></el-option>
            <el-option label="启用" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">搜索</el-button>
          <el-button @click="clear">清除</el-button>
          <el-button type="primary" @click="add">+新增企业</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 企业列表部分 -->
    <el-card class="cardList">
      <el-table :data="tableData">
        <el-table-column label="序号">
          <template v-slot="{ $index }">
            <div>
              {{ (page.page - 1) * page.limit + $index + 1 }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="企业编号" prop="eid"> </el-table-column>
        <el-table-column label="企业名称" prop="name"> </el-table-column>
        <el-table-column label="创建者" prop="short_name"> </el-table-column>
        <el-table-column label="创建日期" prop="create_time"> </el-table-column>
        <el-table-column label="状态" prop="status">
          <template v-slot="{ row }">
            <span :class="{ red: row.status == '禁用' }">{{ row.status }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <div>
              <el-button type="text" @click="edit(row)">编辑</el-button>
              <el-button
                type="text"
                @click="disable(row)"
                v-if="row.status === '启用'"
                >禁用</el-button
              >
              <el-button
                type="text"
                @click="start(row)"
                v-if="row.status === '禁用'"
                >启用</el-button
              >
              <el-button type="text" @click="del(row.id)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页导航部分 -->

      <div class="page">
        <el-pagination
          background
          layout="total,sizes,prev,pager,next,jumper"
          :total="page.total"
          :page-sizes="[1, 5, 10, 20, 30, 40]"
          :page-size="page.limit"
          :current-page="page.page"
          @size-change="sizeChange"
          @current-change="pageChange"
        />
      </div>

      <!-- 新增弹框 -->
      <Add ref="add" @getData="getData" />
    </el-card>
  </div>
</template>

<script>
import cookieJs from 'js-cookie'
import {
  enterpriseList,
  enterpriseRemove,
  enterpriseStatus
} from '@/api/enterprise.js'
export default {
  components: {
    Add: () => import('./component/add.vue')
  },
  data () {
    return {
      form: {
        eid: '',
        name: '',
        username: '',
        status: ''
      },
      tableData: [{}],
      page: {
        page: 1,
        limit: +cookieJs.get('limit') || 5,
        total: 100
      },
      status: ''
    }
  },
  created () {
    this.getData()
  },
  methods: {
    // 搜索
    async onSubmit () {
      const res = await enterpriseList(this.form)
      console.log(res)
      const dataList = res.data.data.items
      dataList.forEach(v => {
        if (v.status === 1) {
          v.status = '启用'
        } else {
          v.status = '禁用'
        }
      })
      this.tableData = dataList
      this.page.total = res.data.data.pagination.total
    },
    sizeChange (limit) {
      cookieJs.set('limit', limit)
      this.page.limit = limit
      this.page.page = 1
      this.getData()
    },
    pageChange (page) {
      this.page.page = page
      this.getData()
    },
    async getData () {
      const res = await enterpriseList(this.page)
      console.log(res)
      const dataList = res.data.data.items
      dataList.forEach(v => {
        if (v.status === 1) {
          v.status = '启用'
        } else {
          v.status = '禁用'
        }
      })
      this.tableData = dataList
      this.page.total = res.data.data.pagination.total
      // this.page.page = res.data.data.pagination.page
    },
    // 新增
    add () {
      this.$refs.add.isShow = true
      this.$refs.add.mode = 'add'
    },
    // 编辑
    edit (row) {
      this.$refs.add.mode = 'edit'
      this.$refs.add.form = JSON.parse(JSON.stringify(row))
      this.$refs.add.isShow = true
    },
    // 删除
    del (id) {
      this.$confirm('您确定退出吗?', '温馨提示').then(async () => {
        await enterpriseRemove({ id })
        this.$message.success('删除成功')
        this.pageChange(1)
      })
    },
    // 禁用
    async disable (id) {
      await enterpriseStatus(id)
      this.getData()
      this.$message.success('禁用成功')
    },
    // 启用
    async start (id) {
      await enterpriseStatus(id)
      this.getData()
      this.$message.success('启用成功')
    },
    // 清除
    clear () {
      this.$refs.form.resetFields()
      this.form = {
        eid: '',
        name: '',
        username: '',
        status: ''
      }
    }
  }
}
</script>

<style lang="less" scoped>
.enterprise {
  width: 100%;
  height: 100%;
  background-color: #ccc;
  .page {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    // margin-bottom: 16px;
  }

  .red {
    color: red;
  }
}
</style>
